﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实用计算器</title>
    <script language="JavaScript" type="text/javascript">
        var results='' ;       //显示结果
        var previouskey='';    //代表上一个字符
        var re=/(\/|\*|\+|-)/  //用来判断+-*/的正则
        var re2=/(\/|\*|\+|-){2}$/;  //用来判断出现2次+-*/的正则
        var re3=/.+(\/|\*|\+|-).+/;  //用来判断小数点+-*/的正则
        var re4=/\d|\./ ;            //用来判断(小数点或数值)的正则
        var re5=/^[^\/\*\+].+\d$/;   //用来判断(以+-*/开始)的正则
        var re6=/\./;                //用来判断小数点的正则
        //计算结果的方法
        function calculate()
        {
//判断如何用户输入了1个值，然后单击了"="
            if (event.srcElement.tagName=="TD"){
                if (event.srcElement.innerText.match(re4)&&previouskey=="=")
                    results='';
                if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
                    if (!results.match(re5)){
                        result.innerText="输入错误!";
                        return;
                    }
//以下是要求长度只能保持在12位以内(有小数点的情况下)
                    results=eval(results);   //转换为数值
                    if (results.toString().length>=12&&results.toString().match(re6))
                        results=results.toString().substring(0,12);
                    result.innerText=results;
                }
//出现2次计算符号的情形
                results+=event.srcElement.innerText;
                if (results.match(re2))
                    results=results.substring(0,results.length-2)+results.charAt(results.length-1);
                result.innerText=results;
            }}
        function calculateresult()
        {
            //当首字符输入错误时
            if (!results.match(re5)){
                result.innerText="输入错误!";
                return;}
            results=eval(results);  //转换结果为数值型
            if (results.toString().length>=12&&results.toString().match(re6))
                results=results.toString().substring(0,12);
            result.innerText=results;
        }
        function pn()
        {
            //首字符为负数的计算
            if (result.innerText.charAt(0)!='-')
                result.innerText=results='-'+result.innerText
            else if (result.innerText.charAt(0)=='-')
                result.innerText=results=result.innerText*(-1)
        }

    </script>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="400">
    <tr>
        <td valign="top" width="100%">
            <table bgcolor="#000000" border="2" cellpadding="0"
                   cellspacing="0" onClick="previouskey=event.srcElement.innerText" style="border-color:black"
                   width="200">
                <tr>
                    <td bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black;text-align:right"
                        width="100%">0
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="middle" width="100%">
                        <table border="0" cellpadding="0"
                               cellspacing="0" style="font:bold 20px Verdana;color:white" width="100%">
                            <tr>
                                <td align="center" width="80%">
                                    <table border="1" cellpadding="0" cellspacing="0"
                                           height="82" onClick="calculate()"
                                           onMouseout="event.srcElement.style.color='white'"
                                           onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
                                           onselectStart="return false"
                                           style="cursor:hand;font:bold 20px Verdana;color:white" width="100%">
                                        <tr>
                                            <td align="center" height="17" width="25%">7</td>
                                            <td align="center" height="17" width="25%">8</td>
                                            <td align="center" height="17" width="25%">9</td>
                                            <td align="center" height="17" width="25%">/</td>
                                        </tr>
                                        <tr>
                                            <td align="center" height="19" width="25%">4</td>
                                            <td align="center" height="19" width="25%">5</td>
                                            <td align="center" height="19" width="25%">6</td>
                                            <td align="center" height="19" width="25%">*</td>
                                        </tr>
                                        <tr>
                                            <td align="center" height="19" width="25%">1</td>
                                            <td align="center" height="19" width="25%">2</td>
                                            <td align="center" height="19" width="25%">3</td>
                                            <td align="center" height="19" width="25%">-</td>
                                        </tr>
                                        <tr>
                                            <td align="center" height="19" width="25%">0</td>
                                            <td align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true"
                                                width="25%">+/-
                                            </td>
                                            <td align="center" height="19" width="25%">.</td>
                                            <td align="center" height="19" width="25%">+</td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="20%">
                                    <div align="left">
                                        <table border="1" cellpadding="0" cellspacing="0"
                                               width="100%">
                                            <tr>
                                                <td onClick="result.innerText=0;results=''"
                                                    style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
                                                    width="100%">C
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div align="left">
                                        <table border="1" cellpadding="0" cellspacing="0" height="81"
                                               width="100%">
                                            <tr>
                                                <td onClick="calculateresult()"
                                                    onMouseout="event.srcElement.style.color='white'"
                                                    onMouseover="event.srcElement.style.color='yellow'"
                                                    style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
                                                    width="100%">

                                                </td>
                                            </tr>
                                        </table>

                                        
</body>
</html>